<template>
  <div class="qckc">
    <el-button type="primary" @click="fanhui" style="margin-bottom: 20px;width:100px;height:40px"
      >返回</el-button
    >
    <header>
      <div class="header-left">
        <img
          class="img1"
          src="https://www.baidu.com/img/flexible/logo/pc/result.png"
          alt=""
        />
        <p class="p1">XXXXXXXxxxxxxx商品…</p>
      </div>
      <div class="header-right">库存数 99</div>
    </header>
    <div class="content">
      <div class="head">
        <el-form class="h-from" ref="form" :model="form" label-width="80px">
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="fanhui" style="margin: 30px 0 0 20px;width:100px;height:40px"
      >查询</el-button
    >
      </div>
      <el-table
            :data="tableData"
            style="width: 100%;margin:0 4%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="操作时间"  >
            </el-table-column>
            <el-table-column prop="address" label="操作数量" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="name" label="详细说明" >
            </el-table-column>
          
          </el-table>

          <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </div>
    </div>
     
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "2020-09-08 xx:xx:xx",
          name: "销售订单（订单号：xxxxxxxxxxxxxxxx）",
          address: "+99",
          
        },
        {
          date: "2020-09-08 xx:xx:xx",
          name: "销售订单（订单号：xxxxxxxxxxxxxxxx）",
          address: "-5",
          
        },
        {
          date: "2020-09-08 xx:xx:xx",
          name: "仓储订单（订单号：xxxxxxxxxxxxxxxx）",
          address: "-5",
          
        },
      ],
    };
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;

  header {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    padding: 0 4%;
    .header-left {
      width: 50%;
      line-height: 100px;
      display: flex;
      .img1 {
        width: 50px;
        height: 50px;
        margin-top: 25px;
      }
      .p1 {
        margin: 0 0 0 20px;
      }
    }
    .header-right {
      line-height: 100px;
    }
  }
  .content{
      width: 100%;
      height: 500px;
      background-color: #fff;
      .head{
          display: flex;
          // justify-content: space-around;
          .h-from{
              margin: 30px 0 0 49%;
          }
      }
      .fenye {
    width: 100%;
    margin-top: 80px;
    .el-pagination,
    .is-background {
      float: right;
      margin-right: 12%;
    }
  }

  }
}
</style>